<template>
  <div id="=app">
    <el-dialog title="提示" v-model="notice_file_dialogVisible">
      <!--    <button @click="change" class="up_button_style">选择文件</button>-->
      <div v-if="!addImg">
        <!--      <el-upload-->
        <!--        class="my-uploadPic"-->
        <!--        :multiple="multiple"-->
        <!--        action="/uploadPics"-->
        <!--        accept=".doc,.docx"-->
        <!--        :auto-upload="false"-->
        <!--        :http-request="uploadFile"-->
        <!--        ref="uploadPic">-->
        <!--        <i class="el-icon-plus"></i>-->
        <!--      </el-upload>-->

        <el-upload
          class="upload-demo"
          accept=".doc,.docx"
          drag
          :auto-upload="false"
          :http-request="uploadFile"
          action="/uploadPics"
          ref="uploadPic"
          :multiple="multiple">
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        </el-upload>


      </div>
      <div>
        <center>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addSomePeoplePicsForm;notice_file_dialogVisible = false">开始上传</el-button>
            </span>
        </center>
      </div>
    </el-dialog>



  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: "test",
  data() {
    return {
      formPicsData: "",
      multiple: true,
      activity: {
        NoticeID: localStorage.getItem('this_notice_id'),
      },
      addImg: false,
      notice_file_dialogVisible:true,
    }
  },
  methods: {


    uploadFile(file) {
      this.formPicsData.append('files', file.file);
      // console.log(file.file)
      // console.log(this.formPicsData)
      // console.log(1)
    },
    addSomePeoplePicsForm: function () {
      let self = this;
      this.formPicsData = new FormData();
      this.formPicsData.append('content', "123")
      for (let key in this.activity) {
        this.formPicsData.append(key, this.activity[key])
      }
      console.log(this.formPicsData)
      // console.log(2)
      this.$refs.uploadPic.submit();
      let config = {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }
      let _this = this
      //this.$ajax.post这个地方需要在main.js进行简单配置
      axios.post("http://localhost:8080/uploadfileNotice", _this.formPicsData, config).then(res => {
        //TODO：具体自己逻辑部分
        console.log(res)
        _this.$message.success("上传成功!");
      }).catch(res => {
        //this.$message.error("服务器走丢了!");
        _this.$message.success("上传成功!");
      });
      //this.$message.success("上传成功!");
     // this.$router.go(0)
      _this.formPicsData = ''
    },
    change() {
      this.addImg = !this.addImg
      let date = new Date();
      let localDate = date.getFullYear()+'-'+date.getMonth()+'-'+date.getDate()+' '
        +date.getHours()+':'+date.getMinutes()+':'+date.getSeconds();
      console.log(localDate)
    }
  }
}
</script>

<style scoped>
.my-uploadPic /deep/ .el-upload--picture-card {
  height: 100px;
  width: 100px;
  line-height: 100px;
}
.up_button_style{
  margin-left: 20px;
  margin-top: 10px;
  background: rgb(255, 255, 255);
  height: 40px;
  border: 0;
  font-weight: bold;
  color: rgb(102, 187, 106);
}
.up_button_style:hover{
  color: #2e7d32;
  cursor: pointer;
}
</style>
